module.exports = {
  // mode: "jit",
  corePlugins: {
    preflight: false,
  },
  darkMode: "class",
  plugins: [],
  content: ["./index.html", "./src/**/*.{vue,ts,tsx}"],
  // purge: {
  //   enable: process.env.NODE_ENV === "production",
  //   content: ["./index.html", "./src/**/*.{vue,ts,tsx}"],
  // },
  theme: {
    fontSize: {
      xs: ["12px", ""],
      sm: ["13px", ""],
      base: ["14px", ""],
      lg: ["16px", ""],
      xl: ["18px", ""],
      "2xl": ["20px", ""],
      "3xl": ["26px", ""],
      "4xl": ["32px", ""],
      "5xl": ["36px", ""],
      "6xl": ["42px", ""],
      "7xl": ["48px", ""],
    },
    extend: {
      zIndex: {
        "-1": "-1",
        1050: 1050,
      },
      colors: {
        "color-header": "#0F1C33",
        "color-main": "#172B4D",
        "color-secondary": "#7B879A",
        "color-disabled": "#B9C0CC",
        "color-active": "#4285F4",
        "color-border": "#E9EBEE",
        "color-split": "#F2F3F4",
        "color-success": "#2ECC74",
        "color-danger": "#F56662",
        "color-gray": "#E9EBEE",
        "color-green": "#3DDC84",
        "color-lightblue": "#39C9E1",
        "color-warn": "#FD8358",
        "color-notice": "#F5B532",
        "color-split-1": "#E1E2E6",
        receipt: "#C67F5B",
      },
      borderColor: {
        dark: "#434343",
      },
      backgroundColor: {
        normal: "#F3F5F7",
        header: "#F8F9FA",
        dark: "#001529",
        "dark-1": "#1f1f1f",
        "dark-2": "#141414",
      },
      spacing: {
        4.5: "1.125rem", //16px
        5.5: "1.375rem",
      },
      width: {
        34: "8.5rem",
        99: "24.75rem",
        108: "27rem",
        123: "30.75rem",
        168: "42rem",
        220: "55rem",
        252: "63rem",
        "px-1": "996px",
        "px-2": "600px",
        "px-3": "390px",
        "px-4": "560px",
        "px-5": "calc(50% - 14px)",
        "px-6": "640px",
      },
      height: {
        17: "4.25rem",
        120: "30rem",
        240: "60rem",
      },
      margin: {
        108: "27rem",
      },
      screens: {
        xxs: "370px",
        xs: "480px",
        sm: "576px",
        md: "768px",
        lg: "992px",
        xl: "1200px",
        xxl: "1600px",
        xxxl: "2000px",
      },
      minWidth: {
        52: "13rem",
        "px-3": "390px",
        "px-4": "560px",
        "px-5": "640px",
        96: "24rem",
      },
      maxWidth: {
        284: "71rem",
        343: "85.75rem",
      },
      minHeight: {
        "px-450": "450px",
        17: "4.25rem",
      },
      maxHeight: {
        "px-650": "650px",
      },
      borderRadius: {
        "px-1": "4px",
      },
    },
  },
  // variants: {
  //   extend: {
  //     paddingLeft: ["even"],
  //     paddingRight: ["odd"],
  //   },
  // },
};
